<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>postion:sticky使用与介绍</title>
<style>
    body{
        margin: 0px;
        padding: 0px;
    }
    div{
        color:#fff
    }
    .big_box{
        margin: 0px auto; 
        background-color: antiquewhite;  
        width: 960px; height: 3000px;
    }
    /* sticky（粘性定位）
    sticky跟postion的其他四个属性值都不一样
    粘性定位可以被认为是相对定位和固定定位的混合
    */

    /* 然后，我们给class为box的div设置粘性定位
    top设置0px
    当我们没滚动页面的时候，红色DIV在原来的位置*/
    .box{
        width: 960px;
        height:100px;
        position: sticky;
        top: 50px;
        background-color: red;

    }
    .other{
        width: 960px;
        height:500px;
        background-color: blue;
    }
    .menu{
        width: 960px;
        height: 70px;
        background-color: wheat;
    }
</style>
</head>
<body>
    <!-- 首先，我们建三个DIV -->
    <div class="big_box">
    <div class="menu">我是顶部导航</div>
    <div class="box">我是公共导航</div>
    <div class="other">我是内容</div>
    </div>
</body>
</html>